
<script lang="tsx">
import useThemeConfig from '@/hooks/useThemeConfig'
import { dexieHistoryTag } from '@/hooks/dexie'
import { defineComponent, PropType } from 'vue'
const image_folder = require('/src/assets/folder.png')

interface Block {
  title: string
  url: string
  children?: Array<any>
}

const dTag = new dexieHistoryTag()

// 打开新标签页
async function goTabs(tag: any){
  const { url, id, title, parentId } = tag
  const params = {
    url,
    id,
    title,
    parentId,
    history: 1
  }
  const historyTag =await dTag.selectById(params.id)
  if(historyTag !== undefined) {
      params.history = historyTag.history! + 1
  }
  dTag.save(params,params.id)
  window.open(url)
}

function getBlocks(arr: Array<Block>, emit: any) {
  const folder = arr.filter(item => item.children).map((val)=>{
    return <a-card-grid onclick={() => emit('floderClick',val)} class="black_item_folder" hoverable={false} style={`width: 10%; text-align: center; min-height: 70px;`}>
    <img src={image_folder} style="width: 35px" alt="" srcset=""/>
    <div style="line-height: 30px">{val.title}</div>
    </a-card-grid>
  })
  const items = arr.filter(item => !item.children).map((val)=>{
    return <a-card-grid  hoverable={false} style={`width: 25%; text-align: center`} onclick={goTabs.bind(goTabs,val)}>
    <a-row class="black_item" type="flex" align="middle">
      <a-col span="2"><img style="width:19px" src={`chrome://favicon/${val.url}`} /></a-col>
      <a-col span="20" class="t-e">{val.title}</a-col>
    </a-row>
    </a-card-grid>
  })
  return [...folder, items]
  // return [<span>我是测试单位</span>]
}

export default defineComponent({
  props:{
    items:{
      type: Array as PropType<Array<Block>>,
      default:() => []
    }
  },
  methods:{
    emit(key:string, val:any){
      this.$emit(key, val)
    }
  },
  setup(){
    const {
      theme
    }= useThemeConfig()
    return {
      theme
    }
  },
  render(){
     return <a-card class="tag_black">{...getBlocks(this.items, this.emit)}
     </a-card>
    // return <div class="right_blocks">{...getBlocks(this.items)}</div>
  }
})
</script>


<style lang="less">
.tag_black{
  //  color: red !important;
    background: transparent !important;
    border: none !important;
  .ant-card-grid{
    margin: 5px 0px;
    cursor: pointer;
    box-shadow: none;
    padding: 0px;
  }
  .black_item_folder{
    &:hover{
      div{
        color: v-bind('theme.fontCheckColor') !important;
      }
    }
  }
  .black_item{
    padding: 24px;
    background: rgba(0,0,0,.1);
    backdrop-filter: blur(4px);
    width: 95%;
    margin: auto;
    border: 1px solid transparent;
    text-align: left;
    &:hover{
      border-color: v-bind('theme.fontCheckColor');
      .ant-col{
        color: v-bind('theme.fontCheckColor') !important;
      }
    }
  }
} 
</style>